<template>
  <div v-loading="loading">
    <el-form :model="item" ref="form1" class="demo-form-inline" label-width="100px" :rules="rules">
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="8">
          <el-form-item label="课程编号:" prop="courseNo">
            <el-input v-model="item.courseNo" style="width:202px;" placeholder="请输入课程编号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程名称:" prop="name">
            <el-input v-model="item.name" style="width:202px;" placeholder="请输入课程名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="8">
          <el-form-item label="类型:" prop="courseClassify">
            <el-select
              v-if="classifyList"
              v-model="item.courseClassify"
              style="width:202px;"
              placeholder="请输入类型"
            >
              <el-option
                v-for="v in classifyList"
                :key="v.dicCode"
                :label="v.dicName"
                :value="v.dicCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="讲师:" prop="lecturerId">
            <el-select v-model="item.lecturerId" style="width:202px;" placeholder="请输入讲师">
              <el-option v-for="v in lecturerArr" :key="v.id" :label="v.name" :value="v.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="8">
          <el-form-item label="价格(元):" prop="price">
            <el-input v-model="item.price" style="width:202px;" placeholder="请输入价格" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="默认排序:" prop="sort">
            <el-input v-model="item.sort" style="width:202px;" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="8">
          <el-form-item label="观看积分" prop="integra">
            <el-input v-model="item.integra" style="width:202px;" placeholder="请输入观看积分" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否上架:">
            <el-checkbox-group v-model="item.status">
              <el-checkbox name="user">上架</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-form-item label="最低观看权限:">
          <el-radio-group v-model="item.flag">
            <el-radio
              v-for="item in levelDTOList"
              :key="item.levelCode"
              :label="item.levelCode"
            >{{ item.levelNmae }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="24">
          <el-form-item label="标签:">
            <NewTags :data="tagsArr" :init-data="initDataArr" @changeTag="changeLabel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="24">
          <el-form-item label="是否首页推荐:">
            <el-checkbox v-model="item.recommend">首页推荐</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:1030px;">
        <el-col :span="16">
          <el-form-item label="摘要:">
            <el-input
              type="textarea"
              rows="3"
              v-model="item.digest"
              maxlength="1000"
              placeholder="请输入内容"
              show-word-limit
              resize="none"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16" style="width:1030px;">
        <el-col :span="16">
          <el-form-item style="textAlign:center;marginTop:30px;">
            <el-button type="primary" @click="submitCourseInfo">提 交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
const item = {
  courseClassify: '',
  courseNo: '',
  digest: '',
  flag: 0,
  integra: 0,
  label: '',
  lecturerId: '',
  name: '',
  price: '',
  sort: 0,
  status: 0,
  recommend: false
}
import initData from '~/utils/initData';
import mmUrl from '~/utils/utilUrl';
import NewTags from '~/components/commom/newTags';
import ElSel from '~/components/commom/el_Select';
import regular from '~/utils/regular';
export default {
  components: {
    NewTags,
    ElSel
  },
  props: ['id'],
  data() {
    return {
      rules: {
        courseNo: regular.require1,
        name: regular.require1,
        courseClassify: regular.requireChange,
        lecturerId: regular.requireChange,
        price: regular.sale,
        sort: regular.sort,
        integra: regular.sort1
      },
      loading: true,
      editor: this.$props.id === 'create',
      item: JSON.parse(JSON.stringify(item)),
      dics: [],
      tagsArr: [],
      initDataArr: [],
      lecturerArr: [],
      classifyList: [],
      levelDTOList: [],
      serarchInfo: {
        keyword: '',
        page: {
          maxResultCount: 0,
          pageNo: 0,
          pageSize: 10,
          skipCount: 0
        }
      }
    }
  },
  mounted() {
    this.item = JSON.parse(JSON.stringify(item))
    this.initGetDate()
  },
  methods: {
    submitCourseInfo() {
      this.item.status = this.item.status === true ? 1 : 0
      this.$refs['form1'].validate(valid => {
        if (valid) {
          this.$post({
            url: !this.editor
              ? mmUrl.course.editcourse
              : mmUrl.course.createcourse,
            data: this.item
          })
            .then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.initGetDate()
              this.$emit('closeDialog')
            })
            .catch(() => {})
        }
      })
    },
    changeLabel(res) {
      this.item.label = JSON.stringify(res)
    },
    // 获取标签的接口
    getInitLabel() {
      this.$post({
        url: mmUrl.label.pageLoad,
        data: {
          keyword: 'string',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          },
          type: 0
        }
      }).then(res => {
        this.tagsArr = res.items.items
      })
    },
    // 获取标签的接口,
    initGetDate() {
      this.$post({
        url: !this.editor
          ? mmUrl.course.loadedit
          : mmUrl.course.loadcreatecourse,
        data: {
          id: !this.editor ? this.$props.id : ''
        }
      }).then(res => {
        this.classifyList = res.classifyList.children
        this.lecturerArr = res.CourseLecture
        this.levelDTOList = res.levelDTOList
        this.getInitLabel()
        this.loading = false
        if (!this.editor) {
          this.item = res.course
          let result = this.item.status === 1
          res.course.label
            ? (this.initDataArr = JSON.parse(res.course.label))
            : '';
          this.$set(this.item, 'status', result)
          // this.item.courseClassify = this.courseClassifyArr.some(
          //   v => v.dicName === res.courseClassifyName
          // )
          //   ? this.courseClassifyArr.filter(
          //       v => v.dicName === res.courseClassifyName
          //     )[0].dicCode
          //   : "";
        }
      })
    }
  }
}
</script>

<style>
</style>
